<template>
  <view>
    <!-- <custom-header></custom-header> -->
    <view class="container">
      <view class="pr-view-main">
        <swiper
          v-if="datas.pro.img_url"
          class="swiper-wrap"
          indicator-dots
          autoplay
          :indicator-active-color="datas.colorValue"
        >
          <block v-if="datas.pro.img_url">
            <swiper-item v-for="(item, index) in handleUnitImg(datas.pro)" :key="index">
              <image :src="item" mode="aspectFit" class="slide-image"></image>
            </swiper-item>
          </block>
        </swiper>

        <view class="basic-info" v-if="false">
          <!-- 价格 -->
          <view v-if="isActivityStart === 0 || datas.type === 'redpacket'" class="prod-price-wrap">
            <view class="dis-price">
              <text class="dollar">￥</text>
              <text class="price">{{ getSku().price || 0 }}</text>
            </view>
            <view class="ori-price">￥{{ datas.pro.price || '' }}</view>
          </view>

          <!-- 促销价 -->
          <view v-else>
            <view class="contain">
              <view class="l">
                <view class="line">
                  <text class="dollar">￥</text>
                  <text class="price">{{ getSku().promotionPrice || getSku().price }}</text>
                  <text class="sub-title">{{
                    datas.pro.activitySubTitle || getSku().title || ''
                  }}</text>
                </view>
                <view class="line">
                  <text>价格</text><text class="ori-price">￥{{ getSku().price || 0 }}</text>
                </view>
              </view>
              <view class="r">
                <view v-if="isActivityStart === 2">距开始还有</view>
                <view v-else-if="isActivityStart === 1">距结束还有</view>
                <view class="time">
                  <view class="block">{{ restHours }}</view>
                  : <view class="block">{{ restMinutes }}</view> :
                  <view class="block">{{ restSeconds }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 优惠券 -->
          <view class="coupons" v-if="datas.coupons.length > 0">
            <view class="left">
              <view class="item" v-for="item in datas.coupons" :key="item.id">
                <!-- 满{{item.minPoint? (item.minPoint + '元') : (item.minCount + '件')}}减{{item.amount || 0}}元 -->
                <text v-if="item.type === 0"
                  >满{{ item.minPoint ? item.minPoint + '元' : item.minCount + '件' }}减{{
                    item.amount
                  }}</text
                >
                <text v-else-if="item.type === 1"
                  >满{{ item.minPoint ? item.minPoint + '元' : item.minCount + '件' }}打{{
                    item.rate * 10
                  }}折</text
                >
              </view>
            </view>
            <view class="right" @click="datas.couponHidden = !datas.couponHidden">领券 ></view>
          </view>

          <!-- 标题 -->
          <view class="prod-title lineText2">
            <view class="iconfont icon-vip"></view>{{ getSku()?.title || '' }}
          </view>
          <!-- 标题 -->
          <view class="prod-title lineText2 sub" v-if="getSku()?.title">
            <view class="iconfont icon-vip"></view>{{ datas.pro?.subTitle || '' }}
          </view>

          <view class="sales">
            <view class="item">库存：{{ getSku().stock || datas.pro.stock }}</view>
            <view class="item">销量：{{ getSku().sale || 0 }}</view>
          </view>
        </view>
        <view class="pro-tags" v-if="label.length > 0">
          <view class="title"> 服务： </view>
          <view class="cont">
            <block v-for="(item, index) in label" :key="index">
              <view class="item"
                ><text class="iconfont rs-icon-confirm01"></text><text>{{ item.name || '' }}</text>
              </view>
            </block>
          </view>
        </view>
        <!-- sku选择 -->
        <view class="pro-classify" v-if="false">
          <view class="caption">选择：</view>
          <view class="pro-norm" @tap="showBuyBox">
            <!-- <text>已选</text><text>{{ datas.nSkus[datas.curIndex] || '' }}</text -->
            <!-- ><text>{{ datas.nSkus[datas.curIndex][1][datas.subIndex] || '' }}</text> -->
          </view>
          <text class="iconfont icon-31fanhui2"></text>
        </view>

        <!-- 评价 -->
        <view class="comments" v-if="false">
          <view class="title">
            <view class="left">
              <text>商品评价</text>
              <text>({{ datas.pro.total || 0 }})</text>
            </view>
            <view class="right" @tap="findComments">查看全部 ></view>
          </view>
          <view v-if="datas.pro.comment">
            <view class="wrap">
              <view class="left">
                <view class="img-box">
                  <image :src="datas.pro.comment.memberAvatar || ''" mode="aspectFit" />
                </view>
                <view class="base">
                  <text class="nick">{{ datas.pro.comment.memberNickName || '未知昵称' }}</text>
                  <u-rate
                    :size="32"
                    active-color="#ff5858"
                    inactive-color="#999"
                    :current="datas.pro.comment.star || 0"
                    :disabled="true"
                  ></u-rate>
                </view>
              </view>
              <view class="right">{{ datas.pro.comment.createTime || '' }}</view>
            </view>
            <view class="content">
              <view class="txt">{{ datas.pro.comment.content }}</view>
              <view class="album" v-if="datas.pro.comment.resources">
                <view
                  class="img-box"
                  v-for="(item, index) in datas.pro.comment.resources"
                  :key="index"
                >
                  <image :src="item" mode="aspectFit" />
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 详情 -->
        <view class="prod-main">
          <view class="caption font-bold">{{ datas.pro.title }}</view>
          <view class="con mt10">
            <view class="video-group" v-if="datas.pro.video_url">
              <video :src="datas.pro.video_url" controls :poster="datas.pro.video_cover"></video>
            </view>
            <view class="ac-content" v-if="datas.pro.rich_text?.length">
              <mp-html :content="datas.pro.rich_text" />
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作 -->
      <view class="art-concern-btm">
        <view class="icon" @tap="showDialog">
          <view class="img-box">
            <image src="/static/icon/share.png" mode="scaleToFill" />
          </view>
          <text class="txt">分享</text>
        </view>
        <view class="icon">
          <button plain="true" open-type="contact">
            <view class="img-box">
              <image src="/static/icon/service.png" mode="scaleToFill" />
            </view>
            <text class="txt">客服</text>
          </button>
        </view>
        <view class="add-cart add-now" v-if="datas.type !== 'redpacket'" @tap="add_cart"
          >加入收藏</view
        >
        <!-- <view class="add-cart buy-now" @tap="showBuyBox">{{
          datas.coupons.length > 0 ? '领券购买' : '立即购买'
        }}</view> -->
      </view>

      <!-- 立即购买Or添加收藏的遮罩 -->
      <view class="add-cart-box fixed-box" v-if="datas.buyToggle">
        <view class="layout">
          <view class="layout-info">
            <view class="img-box">
              <image :src="getSkuImg()" mode="aspectFit"></image>
            </view>
            <view class="pr-intro">
              <!-- <view class="title lineText2">{{pro.title}}</view> -->
              <view class="price">
                <text class="ori">￥{{ getSkuPrice() || 0 }}</text>
                <view class="promotion" v-if="getSku().promotionPrice">
                  <text style="font-size: 28rpx">促销价:</text
                  ><text>￥{{ getSku().promotionPrice || 0 }}</text></view
                >
              </view>
            </view>
            <view class="close-wrap tr">
              <text class="close-btn iconfont rs-icon-guanbi" @tap="hideBuyBox"></text>
            </view>
          </view>
          <view class="norms">
            <view class="dl-list">
              <view class="title"> 分类： </view>
              <view class="items">
                <view
                  v-for="(item, index) in datas.nSkus"
                  :key="index"
                  :data-index="index"
                  :class="datas.curIndex == index ? 'active tem-' + datas.color : ''"
                  @tap="switchIndex"
                >
                  {{ item[0] || '' }}
                </view>
              </view>
            </view>
            <view class="dl-list">
              <view class="title"> 规格： </view>
              <view class="items">
                <!-- <block v-for="(item, index) in datas.nSkus[datas.curIndex][1]" :key="index">
                  <view
                    :class="datas.subIndex == index ? 'active tem-' + datas.color : ''"
                    :data-index="index"
                    @tap="switchSubIndex"
                  >
                    {{ item }}</view
                  >
                </block> -->
              </view>
            </view>
          </view>
          <view class="options">
            <view class="options-tiem">
              <view class="buy-num">
                <label class="title">数量：</label>
                库存：{{ getSkuStock() || '' }}
              </view>
              <view class="count-set">
                <view class="sub" @tap="reduceCount">
                  <text class="iconfont rs-icon-less"></text>
                </view>
                <view class="sub">
                  <input
                    type="number"
                    :value="datas.default_number"
                    @input="addCountBySelf"
                    class="buy-couts"
                  />
                </view>
                <view class="sub" @tap="addCount">
                  <text class="iconfont rs-icon-plus"></text>
                </view>
              </view>
            </view>
          </view>
          <view class="foot-opt">
            <button
              v-if="datas.buySta"
              :class="'add-cart-btn tem-' + datas.color"
              @tap="goods_buy(datas.pro)"
              >立即购买</button
            >
            <button v-else :class="'add-cart-btn tem-' + datas.color" @tap="add_cart(datas.pro)"
              >添加收藏</button
            >
          </view>
        </view>
        <view class="mask" @tap="hideBuyBox"></view>
      </view>
      <!-- 工具盒子 -->
      <!-- <view class="tool-wrap" v-if="false">
        <view :class="'tool-item tem-' + color" @tap="showCartBox">
          <text class="iconfont rs-icon-cart-add"></text>
        </view>
        <view :class="'tool-item tem-' + color" @tap="showDialog">
          <text class="iconfont rs-icon-share"></text>
        </view>
        <view :class="'tool-item tem-' + color" @tap="bindGoTop">
          <text class="iconfont rs-icon-top"></text>
        </view>
      </view> -->
    </view>

    <!-- 领券 -->
    <view class="coupons-box" v-show="datas.couponHidden">
      <view class="mask" @click="datas.couponHidden = !datas.couponHidden"></view>
      <view class="content">
        <view class="title">优惠</view>
        <view class="item" v-for="item in datas.coupons" :key="item.couponId">
          <view class="left">
            <view class="amount" v-if="item.type === 0"
              >￥<text>{{ item.amount }}</text></view
            >
            <view class="amount" v-else-if="item.type === 1"
              ><text>{{ item.rate * 10 }} <text style="font-size: 26rpx">折</text></text></view
            >
            <view class="condition" v-if="item.thresholdType === 0">无门槛</view>
            <view class="condition" v-else
              >满{{ item.minPoint ? item.minPoint + '元' : item.minCount + '件' }}可用</view
            >
          </view>
          <view class="right">
            <view class="top">{{ item.description }}</view>
            <view class="bottom">
              <view class="time" v-if="item.timeType === 0"
                >{{ splitStr(item.startTime) }} 至 {{ splitStr(item.endTime) }}
              </view>
              <view class="time" v-else-if="item.timeType === 1"
                >领取后立即生效,有效期{{ item.limitDay || 0 }}天</view
              >
              <view class="time" v-else-if="item.timeType === 2"
                >领取后{{ item.gapDay || 0 }}天后有效,有效期{{ item.limitDay || 0 }}天
              </view>
              <view class="receive" v-if="item.canReceive" @click="receiveCoupon(item.couponId)"
                >领取</view
              >
              <view class="received" v-else>已领取</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 分享遮罩 -->
    <view class="share-mask" v-if="datas.toggleCan">
      <view class="share-wrap">
        <view class="share-list">
          <view class="share-item">
            <button open-type="share">
              <view class="item-box">
                <!-- <view class="iconfont rs-icon-wechat"></view> -->
                <image src="/static/icon/share.png" mode="scaleToFill" />
              </view>
              <text>分享给好友</text>
            </button>
          </view>
          <view class="share-item" @tap="formSubmit">
            <view class="item-box">
              <!-- <view class="iconfont rs-icon-yaoqinghaibao"></view> -->
              <image src="/static/icon/save.png" mode="scaleToFill" />
            </view>
            <text>生成商品海报</text>
          </view>
        </view>
        <view class="close-btn" @tap="hideDialog"> 关闭 </view>
      </view>
    </view>

    <!-- 画海报 -->
    <view class="imagePathBox" v-if="datas.maskHidden">
      <view class="img-box">
        <image :src="datas.resImg" class="shengcheng"></image>
      </view>
      <button class="baocun" @tap="baocun">保存到相册</button>
      <view class="guanbi" @tap="hideCanvas">关闭</view>
    </view>
    <view class="canvas-box">
      <canvas
        style="width: 375px; height: 550px; position: fixed; top: 9999px"
        canvas-id="mycanvas"
      ></canvas>
    </view>

    <add-tip tip="点击图标,返回首页"></add-tip>
  </view>
</template>

<script lang="ts" setup>
  import { onShareTimeline, onShareAppMessage, onLoad } from '@dcloudio/uni-app';
  import { getProductDetail, getCoupons, addCart } from '@/services/api/products/products';
  import { computed, onMounted, reactive, watch } from 'vue';
  import { getCache } from '@/utils/catch';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { getEnvValue } from '@/utils/env';
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';

  const datas = reactive({
    type: 'normal', //购买类型
    pro: {} as any,
    nSkus: new Map(),
    categoryId: null,
    id: null,
    color: 'red',
    buySta: true, // 购买or收藏
    buyToggle: false,
    curIndex: 0, // 类别
    subIndex: 0, // 规格
    default_number: 1, // 数量
    couponHidden: false,
    maskHidden: false,
    noticeDialog: false,
    toggleCan: false,
    cImg: '',
    codeImg: '',
    resImg: '',
    canvasHidden: false,
    labels: [],
    tempCodeUrl: '', //生成的二维码链接

    timer: 0,
    count: 0,

    colorValue: '#fff',

    coupons: [] as Array<any>,
  });

  const label = computed<Array<any>>(() => {
    if (datas.pro.hasOwnProperty('tags') && Array.isArray(datas.pro.tags)) {
      return datas.labels.filter((e: any) => {
        if (datas.pro?.tags && datas.pro?.tags?.indexOf(parseInt(e.id)) != -1) {
          return true;
        }
      });
    } else {
      return [];
    }
  });

  const handleUnitImg = (row: any) => {
    if (!row.img_url) return '';
    return row.img_url.split(',');
  };

  /**
   * @description: 0: 活动结束或没有活动, 1: 活动进行中, 2: 活动未开始
   */
  const isActivityStart = computed(() => {
    if (datas.pro && JSON.stringify(datas.pro) !== '{}' && datas.count >= 0) {
      const curT = new Date().getTime();
      const startT = new Date(datas.pro.activityStartTime).getTime();
      const endT = new Date(datas.pro.activityEndTime).getTime();
      if (curT <= startT) {
        return 2;
      } else if (curT <= endT && curT > startT) {
        // 判断timer是否已经开始,但是开始之前也会,防止无限递归
        if (datas.timer === 0) {
          updateTime();
        }
        return 1;
      } else {
        clearTime();
        return 0;
      }
    } else {
      return 0;
    }
  });

  // 活动开始或剩余倒计时
  const restHours = computed(() => {
    const curT = new Date().getTime();
    const endT = new Date(datas.pro.activityEndTime).getTime();
    const startT = new Date(datas.pro.activityStartTime).getTime();
    if (isActivityStart.value === 1 && datas.count >= 0) {
      const diff = endT - curT;
      const h = Math.floor(diff / 1000 / 3600);
      return h;
    } else {
      const diff = startT - curT;
      const h = Math.floor(diff / 1000 / 3600);
      return h;
    }
  });

  const restMinutes = computed(() => {
    const curT = new Date().getTime();
    const endT = new Date(datas.pro.activityEndTime).getTime();
    const startT = new Date(datas.pro.activityStartTime).getTime();
    const h = restHours.value;

    if (isActivityStart.value === 1 && datas.count >= 0) {
      const diff = endT - curT;
      const m = Math.floor((diff - h * 3600 * 1000) / 1000 / 60);
      return m;
    } else {
      const diff = startT - curT;
      const m = Math.floor((diff - h * 3600 * 1000) / 1000 / 60);
      return m;
    }
  });

  const restSeconds = computed(() => {
    const curT = new Date().getTime();
    const endT = new Date(datas.pro.activityEndTime).getTime();
    const startT = new Date(datas.pro.activityStartTime).getTime();
    const h = restHours.value;
    const m = restMinutes.value;

    if (isActivityStart.value === 1 && datas.count >= 0) {
      const diff = endT - curT;
      const s = Math.floor((diff - h * 3600 * 1000 - m * 1000 * 60) / 1000);
      return s;
    } else {
      const diff = startT - curT;
      const s = Math.floor((diff - h * 3600 * 1000 - m * 1000 * 60) / 1000);
      return s;
    }
  });

  watch(
    () => datas.id,
    (n) => {
      getSpuDetail(datas.id);
    },
  );

  onLoad((e: any) => {
    console.log('e: ', e);
    if (e && e.hasOwnProperty('scene')) {
      // 小程序码分享
      datas.categoryId = e.scene || -1;
    } else {
      // 页面跳转
      datas.id = e.id || null;
    }
  });

  //用户点击右上角分享
  onShareAppMessage((e: any) => {
    const inviter = JSON.parse(uni.getStorageSync('userInfo'));
    let path = '/pages/product_view/index?id=' + datas.categoryId;
    let inviterId = null;
    if (inviter.distributeStatus === 1) {
      inviterId = inviter.id;
      path = path + '&inviterId=' + inviterId;
    }
    console.log('path: ', path);
    if (e.from === 'button') {
      return {
        title: datas.pro.title,
        imageUrl: datas.pro.img_url,
        path,
      };
    } else {
      return {
        title: datas.pro.title,
        imageUrl: datas.pro.img_url,
        path,
      };
    }
  });

  onShareTimeline(() => {
    const inviter = JSON.parse(uni.getStorageSync('userInfo'));
    let path = '/pages/product_view/index?id=' + datas.categoryId;
    let inviterId = null;
    if (inviter.distributeStatus === 1) {
      inviterId = inviter.id;
      path = path + '&inviterId=' + inviterId;
    }
    return {
      title: datas.pro.title,
      imageUrl: datas.pro.img_url,
      path,
    };
  });
  const beforeDestroy = () => {
    clearInterval(datas.timer);
  };

  // 领券
  const receiveCoupon = async (e) => {
    const res: any = await receiveCoupon(e);
    console.log(res);
    if (res.code === 0) {
      uni.showToast({
        title: '领券成功',
        icon: 'success',
        mask: true,
      });
      getCoupons(datas.categoryId);
      datas.couponHidden = false;
    } else {
      console.log(res.msg);
    }
  };

  // 只显示年月日
  const splitStr = (s = '', char = ' ') => {
    if (!s) return '';
    return s.split(char)[0];
  };

  // 获取优惠券列表
  // const getCoupons = async (id) => {
  //   const res = await getCouponsByPro(id)
  //   console.log(res)
  //   if (res.code === 0) {
  //     this.coupons = res.list
  //   }
  // }

  // 刷新时间
  const updateTime = () => {
    if (datas.pro.activityExist) {
      datas.timer = setInterval(() => {
        datas.count = datas.count + 1;
      }, 1000);
    }
  };

  const clearTime = () => {
    clearInterval(datas.timer);
    datas.timer = 0;
    datas.count = 0;
  };

  // 查看所有评论
  const findComments = () => {
    uni.navigateTo({ url: '/pages/comment/index?id=' + datas.pro.id });
  };
  /**
   * @description: 解析spu的sku
   */
  const parseSku = (e = {} as any) => {
    const skus = e?.skuList || [];
    if (skus.length <= 0) return;
    let nSkus = new Map();
    nSkus = skus;
    datas.nSkus = nSkus;
  };

  /**
   * @description 返回选择的skuId
   */
  const getSkuId = () => {
    const skus = datas.pro?.skuList || [];
    if (skus.length > 0) {
      let seSkuId = skus.filter((e) => {
        // return (
        //   e.kind == datas.nSkus[datas.curIndex][0] &&
        //   e.specs == datas.nSkus[datas.curIndex][1][datas.subIndex]
        // );
        return true;
      });
      return seSkuId[0].id || null;
    }
    return null;
  };

  /**
   * @description: 返回选择的sku price
   */
  const getSkuPrice = () => {
    const skus = datas.pro.skuList;
    if (!skus || skus.length <= 0) return '';
    let seSkuPrice = skus.filter((e) => {
      return e.id == getSkuId();
    });
    if (Array.isArray(seSkuPrice) && seSkuPrice.length > 0) {
      return seSkuPrice[0]?.price;
    } else {
      return '';
    }
  };
  /**
   * @description: 返回选择的sku
   */
  const getSku = () => {
    const skus = datas.pro.skuList;
    let seSkuPrice;
    if (Array.isArray(skus) && skus.length > 0) {
      seSkuPrice = skus.filter((e) => {
        return e.id == getSkuId();
      });
      if (Array.isArray(seSkuPrice) && seSkuPrice.length > 0) {
        return seSkuPrice[0];
      }
    } else {
      return {};
    }
  };
  /**
   * @description: 返回选择的sku 库存
   */
  const getSkuStock = () => {
    const skus = datas.pro.skuList;
    let seSkuPrice = skus.filter((e) => {
      return e.id == getSkuId();
    });
    if (Array.isArray(seSkuPrice) && seSkuPrice.length > 0) {
      return seSkuPrice[0].stock;
    } else {
      return '';
    }
  };
  /**
   * @description: 返回选择的sku img_url
   */
  const getSkuImg = () => {
    const skus = datas.pro.skuList;
    let seSkuPrice = skus.filter((e) => {
      return e.id == getSkuId();
    });
    if (Array.isArray(seSkuPrice) && seSkuPrice.length > 0) {
      return seSkuPrice[0].img_url;
    } else {
      return '';
    }
  };

  /**
   * @description: 获取商品详情
   */
  const getSpuDetail = async (id: number | null) => {
    await getProductDetail({ id: id }).then((res: any) => {
      datas.pro = res.data || {};
      if (datas.pro && datas.pro.rich_text) {
        datas.pro.rich_text = datas.pro?.rich_text?.replace(/\<img/g, '<img class="img-node"');
      }
      datas.pro.price = datas.pro.price || '-';
      datas.pro.vipPrice = datas.pro.vipPrice || '-';
      parseSku(datas.pro);
    });
  };

  /*====================================================================================================================
    ====================================================加入收藏业务代码==================================================
    ======================================================================================================================*/
  const goods_buy = (e) => {
    if (getSkuStock() < datas.default_number) {
      uni.showLoading({
        title: '库存不够',
        mask: true,
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 800);
      return false;
    }
    // 先判断有没有选择sku或者默认sku
    // 传参sku, 价格，数量，订单备注, 标题, intro

    const kind = e.skuList.filter((e) => {
      return e.id == getSkuId();
    })[0].kind;
    const specs = e.skuList.filter((e) => {
      return e.id == getSkuId();
    })[0].specs;

    const preOrder = {
      list: [
        {
          quantity: datas.default_number,
          skuId: getSkuId(),
        },
      ],
    };
  };

  // 加入收藏
  const add_cart = (e: any) => {
    const payload = {
      users_id: getCache(USER_INFO_KEY).id,
      merchant_id: getEnvValue('VITE_MERCHANT_ID'),
      spu_id: datas.id,
    };
    addCart(payload).then((result) => {
      console.log(result);
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        mask: true,
      });
    });
  };

  //手动输入商品数量
  const addCountBySelf = (e: any) => {
    let num = Number.isNaN(e.detail.value) ? 1 : parseInt(e.detail.value); //商品数
    if (JSON.stringify(num) == 'null' || num < 0) {
      return 1;
    }
    let repertory = getSkuStock(); // 库存

    if (num > repertory) {
      e.detail.value = num;
      num = repertory;
    }
    if (num <= 1) {
      num = 1;
    }

    datas.default_number = num;
  };
  //添加数量
  const addCount = () => {
    let num = datas.default_number; //商品数

    let curIndex = datas.curIndex;
    let subIndex = datas.subIndex;
    let repertory = datas.pro.skuList[curIndex].stock; // 库存

    num++;

    if (num > repertory) {
      num = repertory;
    }

    datas.default_number = num;
  };
  //减少数量
  const reduceCount = () => {
    let num = datas.default_number; //商品数

    num--;

    if (num <= 1) {
      num = 1;
    }

    datas.default_number = num;
  };

  const showBuyBox = async () => {
    // 循环领券
    if (datas.type) {
      for (let i = 0; i < datas.coupons.length; i++) {
        if (datas.coupons[i]?.canReceive) {
          await receiveCoupon(datas.coupons[i]?.couponId);
        }
      }
    }
    datas.buySta = true;
    datas.buyToggle = true;
  };

  const showCartBox = async () => {
    // 循环领券
    for (let i = 0; i < datas.coupons.length; i++) {
      if (datas.coupons[i]?.canReceive) {
        await receiveCoupon(datas.coupons[i].couponId);
      }
    }
    datas.buySta = false;
    datas.buyToggle = true;
  };

  const hideBuyBox = () => {
    datas.buyToggle = false;
  };

  /*====================================================================================================================
====================================================收藏商品 End=====================================================
======================================================================================================================*/
  // 返回顶部
  const bindGoTop = (event: any) => {
    uni.pageScrollTo({
      scrollTop: 0,
    });
  };

  const showDialog = () => {
    datas.toggleCan = true;
  };

  const hideDialog = () => {
    datas.toggleCan = false;
  };

  const hideCanvas = () => {
    datas.maskHidden = false;
  };

  // getImageInfo不支持base64,转化为本地图片
  const save = (data: any): Promise<any> => {
    // return new Promise((resolve, reject) => {
    //   let fileManager = uni.getFileSystemManager()
    //   let imgPath = `${wx.env.USER_DATA_PATH}/tempCodeImg.jpg`
    //   let imgData = data
    //   // 缓存qrcode到本地
    //   fileManager.writeFile({
    //     filePath: imgPath,
    //     data: imgData,
    //     encoding: 'base64',
    //     success: (res) => {
    //       console.log('保存的结果', res)

    //       resolve(imgPath)
    //       //   console.log(res)
    //     },
    //     fail: (err) => {
    //       reject(err)
    //     }
    //   })
    // })
    return Promise.resolve(1);
  };

  //点击保存到相册
  const baocun = async (e) => {
    let that = this;
    console.log('object');

    await new Promise((resolve, reject) => {
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success: (result) => {
          console.log('auth', result);
          resolve(result);
        },
        fail: (error) => {
          console.log('auth', error);
          uni.showModal({
            title: '提示',
            content: '相册保存授权失败,是否重新授权',
            showCancel: true,
            success: ({ confirm, cancel }) => {
              if (confirm) {
                uni.openSetting({});
              } else {
                reject(false);
              }
            },
          });
        },
      });
    });

    // await new Promise((resolve, reject) => {
    //   uni.saveImageToPhotosAlbum({
    //     filePath: resImg,

    //     success(res) {
    //       console.log(res)
    //       uni.showModal({
    //         content: '图片已保存到相册，赶紧晒一下吧~',
    //         showCancel: false,
    //         confirmText: '好的',
    //         confirmColor: '#333',
    //         success: function (res) {
    //           if (res.confirm) {
    //             /* 该隐藏的隐藏 */

    //             that.maskHidden = false
    //           }
    //         },
    //         fail: function (error) {
    //           console.log(error)
    //         }
    //       })
    //     }
    //   })
    // })
  };
  const formSubmit = (e: any) => {
    hideDialog();
    datas.maskHidden = false;
    uni.showToast({
      title: '图片正在生成中...',
      icon: 'loading',
      duration: 4000,
    });
    setTimeout(function () {
      // uni.hideToast()
      createNewImg();
      (datas.maskHidden = true), (datas.toggleCan = false);
    }, 100);
  };
  // 将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  const createNewImg = async () => {
    var context = uni.createCanvasContext('mycanvas');
    context.setFillStyle('#fff');
    context.fillRect(0, 0, 375, 565);
    var imgPath = datas.pro.img_url || '';
    console.log('datas: ', datas);
    console.log('imgPath: ', imgPath);

    // 绘制图片
    await new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: imgPath,
        success: ({ width, height, path, orientation, type }) => {
          context.drawImage(path, 10, 10, 355, 355);
          context.stroke();

          resolve(path);
        },
        fail: (error) => {
          uni.showToast({
            title: '网络情况不佳,海报生成失败',
            icon: 'none',
            duration: 2000,
          });
        },
      });
    });
    var name = datas.pro.title;
    const vipPrice = datas.pro.vipPrice;
    const price = datas.pro.price;
    console.log('price: ', price);
    const textWidth = context.measureText(price).width + 40;

    //绘制名字

    if (name.length < 12) {
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('left');
      context.fillText(name, 10, 425);
      context.stroke();

      //绘制价格
      context.setFontSize(20);
      context.setFillStyle('#f35150');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.vipPrice, 10, 460);
      context.stroke();

      // 绘制划线价格

      context.setFontSize(18);
      context.setFillStyle('#999');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.price, 85, 460);
      context.stroke();

      // 绘制划线
      context.beginPath();
      context.moveTo(85, 454);
      context.lineTo(85 + textWidth, 454);
      context.setLineWidth(1);
      context.setStrokeStyle('#999');
      context.stroke();
    } else if (name.length < 21) {
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('left');
      context.fillText(name.substring(0, 12), 10, 425);
      context.stroke();
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('left');
      context.fillText(name.substring(12), 10, 455);
      context.stroke(); //绘制价格

      context.setFontSize(20);
      context.setFillStyle('#f35150');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.vipPrice, 10, 490);
      context.stroke();

      // 绘制划线价格
      context.setFontSize(18);
      context.setFillStyle('#999');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.price, 85, 490);
      context.stroke();

      // 绘制划线
      context.beginPath();
      context.moveTo(85, 484);
      context.lineTo(85 + textWidth, 484);
      context.setLineWidth(1);
      context.setStrokeStyle('#999');
      context.stroke();
    } else {
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('left');
      context.fillText(name.substring(0, 12), 10, 425);
      context.stroke();
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('left');
      context.fillText(name.substring(12, 22) + '...', 10, 455);
      context.stroke();

      //绘制价格
      context.setFontSize(20);
      context.setFillStyle('#f35150');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.vipPrice, 10, 490);
      context.stroke();

      // 绘制划线价格
      context.setFontSize(18);
      context.setFillStyle('#999');
      context.setTextAlign('left');
      context.fillText('￥' + datas.pro.price, 85, 490);
      context.stroke();

      // 绘制划线
      context.beginPath();
      context.moveTo(85, 484);
      context.lineTo(85 + textWidth, 484);
      context.setLineWidth(1);
      context.setStrokeStyle('#999');
      context.stroke();
    }

    //绘制线条

    context.save();
    context.setStrokeStyle('#cccccc');
    context.moveTo(10, 385);
    context.lineTo(365, 385);
    context.setLineWidth(0.2);
    context.stroke();
    context.fill(); //绘制矩形

    context.beginPath();
    context.rect(10, 505, 18, 3);
    context.setFillStyle('#00c061');
    context.fill();
    context.setStrokeStyle('#00c061');
    context.stroke();
    context.closePath(); //绘制长按识别小程序码访问标语

    context.setFontSize(14);
    context.setFillStyle('#666666');
    context.setTextAlign('left');
    context.fillText('长按图片了解更多产品信息', 10, 530);
    context.stroke();

    save(datas.codeImg).then((e) => {
      context.drawImage(e, 240, 410, 120, 120);
      context.stroke();
      context.draw();
    });

    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(() => {
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          datas.resImg = tempFilePath;
          datas.canvasHidden = true;
        },
        fail: function (err) {
          console.log('生成失败,', err);
        },
        complete: function () {
          // uni.hideToast();
        },
      });
    }, 2000);
  };

  const toIndex = () => {
    let pages = getCurrentPages();
    let currentPage = pages.pop();
    let chat = uni.getStorageSync('chatData');

    for (var i = 0; i < chat.length; i++) {
      chat[i].receive = true;
    }

    uni.setStorageSync('chatData', chat);

    if (currentPage?.route == 'pages/card/index') {
      return;
    } else {
      uni.switchTab({
        url: '/pages/card/index',
      });
    }
  };

  const switchIndex = (e: any) => {
    datas.curIndex = e.currentTarget.dataset.index;
    datas.subIndex = 0;
  };

  const switchSubIndex = (e: any) => {
    datas.subIndex = e.currentTarget.dataset.index;
  };
  // selectNorm(e){
</script>
<style lang="scss" scoped>
  .container {
    background: #f5f5f5;
  }

  .swiper-wrap {
    height: 750rpx;
  }

  .slide-image {
    width: 100%;
    height: 100%;
  }

  ::v-deep .img-node {
    width: 100%;
    padding: 0;
    display: flex;
  }

  /*产品介绍*/

  .basic-info {
    padding: 24rpx 0 0;
    margin-bottom: 20rpx;
    background: #fff;

    .prod-price-wrap {
      padding: 8rpx 26rpx;
    }

    .contain {
      color: #fff;
      display: flex;
      padding: 12rpx 18rpx;
      justify-content: space-between;
      background: linear-gradient(45deg, #ff5600ed, #ff0000c4);

      .l {
        .line {
          display: flex;
          align-items: center;

          .price {
            font-size: 50rpx;
          }

          .sub-title {
            margin-left: 10rpx;
            display: inline-block;
            background: #fff;
            color: #ff0000;
            border-radius: 19rpx;
            padding: 0 18rpx;
          }
        }

        .line:nth-of-type(2) {
          font-size: 20rpx;

          .ori-price {
            color: #fffc;
            margin-left: 8rpx;
          }
        }
      }

      .r {
        display: flex;
        font-size: 22rpx;
        flex-flow: column;
        justify-content: space-around;
        align-items: flex-end;

        .time {
          display: flex;
          justify-content: space-around;

          .block {
            border-radius: 4rpx;
            display: inline-block;
            font-weight: bold;
            font-size: 22rpx;
            width: 46rpx;
            height: 40rpx;
            margin: 0 16rpx;
            line-height: 40rpx;
            text-align: center;
            background: #fff;
            color: #ff0000;
          }
        }
      }
    }

    // 优惠券
    .coupons {
      display: flex;
      padding: 22rpx 26rpx;
      font-size: 26rpx;
      color: #ff5858;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        flex-flow: row wrap;

        .item {
          background: #ff585820;
          display: flex;
          align-items: center;
          padding: 6rpx 22rpx;
          position: relative;
          margin-right: 20rpx;
          margin-bottom: 10rpx;
        }

        .item::before {
          content: '';
          background-image: radial-gradient(white, white);
          display: block;
          position: absolute;
          width: 28rpx;
          height: 28rpx;
          left: -18rpx;
          border-radius: 50%;
        }

        .item::after {
          content: '';
          background-image: radial-gradient(white, white);
          display: block;
          position: absolute;
          width: 28rpx;
          height: 28rpx;
          right: -18rpx;
          border-radius: 50%;
        }
      }

      .right {
        width: 160rpx;
      }
    }
  }

  .prod-title {
    padding: 8rpx 32rpx;
    color: #333;
    font-size: 32rpx;
    max-height: 120rpx;
    font-weight: bold;
  }

  .prod-title.sub {
    font-weight: 400;
    color: #666;
    font-size: 26rpx;
  }

  .lineText2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .prod-title .iconfont {
    color: #e64340;
    padding-right: 10rpx;
    display: none;
  }

  .prod-price-wrap {
    display: flex;
    align-items: center;
  }

  .dis-price {
    color: #ff5858;
    font-size: 40rpx;
    font-weight: bold;
  }

  .ori-price {
    margin-left: 20rpx;
    color: #999;
    text-decoration: line-through;
  }

  .sales {
    padding: 0 32rpx;
    border-top: 2rpx solid #f5f5f5;
    height: 64rpx;
    line-height: 64rpx;
  }

  .sales .item {
    display: inline-block;
    margin-right: 50rpx;
    color: #666;
    font-size: 24rpx;
  }

  .prod-main {
    padding: 0 32rpx 20rpx 32rpx;
    background: #fff;
    padding-bottom: 178rpx;
  }

  .prod-main .caption {
    line-height: 90rpx;
    border-bottom: 2rpx solid #f5f5f5;
  }

  .prod-main .con text {
    display: block;
    margin-bottom: 20rpx;
    line-height: 1.8;
  }

  .prod-main .con image {
    width: 100%;
    vertical-align: top;
  }

  .video-group {
    margin-bottom: 20rpx;
  }

  // 商品评价
  .comments {
    background: #fff;
    margin-bottom: 20rpx;
    padding: 22rpx 32rpx;

    .title {
      display: flex;
      justify-content: space-between;

      .left {
        font-size: 30rpx;

        text:nth-of-type(1) {
          color: #333;
        }

        text:nth-of-type(2) {
          color: #666;
        }
      }

      .right {
        font-size: 22rpx;
        color: #999;
      }
    }

    .wrap {
      margin-top: 23rpx;
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        flex-flow: row nowrap;

        .img-box {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .base {
          margin-left: 10rpx;
          color: #333;
          font-size: 28rpx;
          display: flex;
          flex-flow: column;
          justify-content: space-around;

          text {
            padding-left: 6rpx;
            height: 40rpx;
            line-height: 40rpx;
            margin-bottom: 12rpx;
          }
        }
      }

      .right {
        font-size: 22rpx;
        color: #999;
      }
    }

    .content {
      margin-top: 20rpx;
      display: flex;
      flex-flow: column nowrap;

      .txt {
        color: #333;
        font-size: 28rpx;
        line-height: 40rpx;
      }

      .album {
        display: flex;
        flex-flow: row wrap;

        .img-box {
          width: 30%;
          height: 200rpx;
          margin-right: 15rpx;
          margin-top: 20rpx;

          image {
            max-height: 100%;
            max-width: 100%;
          }
        }
      }
    }
  }

  /*底部按钮*/

  .art-concern-btm {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    box-shadow: 0px -4px 10px 0px rgba(153, 153, 153, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* height: 100rpx; */
    align-items: center;
    background: #fff;
    color: #666;
    overflow: hidden;
    padding: 14rpx 20rpx;
    box-sizing: border-box;
    text-align: center;

    .icon {
      display: flex;
      flex-flow: column nowrap;
      height: 100%;
      justify-content: space-between;

      button {
        display: inline-block;
        width: 40rpx;
        line-height: 1.2;
        color: #666;
        border: none;
        border-radius: unset;
        padding: 0;
        height: 69rpx;
        display: flex;
        flex-flow: column;
      }

      button::after {
        border: none;
      }

      .txt {
        height: 28rpx;
        line-height: 28rpx;
        font-size: 20rpx;
      }

      .img-box {
        width: 40rpx;
        height: 40rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .icon:nth-of-type(1) {
      height: 68rpx;
      padding-right: 20rpx;
      border-right: 2rpx solid #eeeeee;
    }

    .icon:nth-of-type(2) {
      margin-left: 30rpx;
      margin-right: 50rpx;
    }

    .add-cart {
      width: 255rpx;
      height: 80rpx;
      border-radius: 40rpx;
      color: #fff;
      font-size: 30rpx;
      line-height: 80rpx;
      font-weight: 600;
    }

    .add-now {
      background: linear-gradient(90deg, #ff7979 0%, #ff5858 100%);
    }

    .buy-now {
      flex: 1;
      background: linear-gradient(90deg, #ffcc00 0%, #ff9500 100%);
      margin-left: 20rpx;
    }
  }

  // 优惠券遮罩层
  .coupons-box {
    .content {
      height: 760rpx;
      background: #fff;
      position: fixed;
      bottom: 0;
      z-index: 99;
      width: 100%;
      border-radius: 20rpx;
      overflow: scroll;
      padding: 0 32rpx;

      .title {
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        position: sticky;
      }

      .item {
        width: 100%;
        height: 190rpx;
        border-top: 14rpx solid #ff5858;
        box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
        margin-bottom: 32rpx;
        border-radius: 14rpx;
        padding: 16rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 30%;
          text-align: center;
          display: flex;
          flex-flow: column;
          color: #ff5858;

          .amount {
            text {
              font-size: 60rpx;
            }
          }

          .condition {
            font-size: 26rpx;
          }
        }

        .right {
          flex: 1;
          height: 100%;
          max-width: 400rpx;
          text-align: left;
          display: flex;
          justify-content: space-between;
          flex-flow: column;

          .top {
            color: #666;
            font-size: 28rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 20rpx;
            align-items: center;

            .time {
              width: 64%;
              color: #999;
            }

            .receive {
              font-size: 24rpx;
              padding: 2rpx 26rpx;
              background: #ff5858;
              color: #fff;
              border-radius: 22rpx;
            }

            .received {
              font-size: 24rpx;
              padding: 2rpx 26rpx;
              background: #fff;
              border: 2rpx solid #ff5858;
              color: #ff5858;
              border-radius: 22rpx;
            }
          }
        }
      }
    }
  }

  /*选择遮罩层*/

  .add-cart-box {
    z-index: 99;
    padding: 32rpx 32rox 15rpx;
  }

  .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  .layout {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 2;
    box-sizing: border-box;
  }

  .layout-info {
    display: flex;
    padding: 32rpx 32rpx 0;
  }

  .close-wrap .close-btn {
    display: inline-block;
    text-align: center;
    font-size: 30rpx;
    color: #333;
    margin-right: 10rpx;
  }

  .layout-info .img-box {
    width: 172rpx;
    height: 172rpx;
    overflow: hidden;
    border-radius: 8rpx;
    outline: 2rpx solid #f2f2f2;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .layout-info .pr-intro {
    display: flex;
    margin-left: 16rpx;
    flex-flow: column-reverse;
    font-size: 40rpx;
    font-weight: 600;
    color: #ff5858;
    line-height: 56rpx;
    flex: 1;

    .ori {
      margin-right: 22rpx;
      font-weight: 400;
    }

    .promotion {
      color: #fff;
      display: inline;
      background: #ff5858;
      padding: 4px 20rpx;
      border-radius: 26rpx;
      font-size: 36rpx;
      font-weight: 400;
    }
  }

  .layout .norms {
    padding: 24rpx 32rpx 0;
  }

  .layout .norms .dl-list ~ .dl-list {
    margin-top: 30rpx;
  }

  .layout .norms .dl-list .title {
    font-size: 26rpx;
    font-weight: 600;
    color: #333333;
    line-height: 37rpx;
  }

  .layout .norms .dl-list .items {
    display: flex;
    margin-top: 20rpx;
    flex-wrap: wrap;
  }

  .layout .norms .dl-list .items view {
    display: inline-block;
    padding: 10rpx 40rpx;
    border-radius: 29rpx;
    background-color: #f6f6f6;
    color: #4e4e4e;
    margin-right: 20rpx;
    font-size: 24rpx;
    flex: 0 0 auto;
    margin-bottom: 24rpx;
  }

  .layout .norms .dl-list .items view.active {
    border: 1px solid #ff5858;
    background-color: #fff5f5;
    color: #ff5858;
  }

  .pr-intro .title {
    max-height: 90rpx;
    color: #333;
  }

  .pr-intro .price {
    font-size: 40rpx;
    padding-top: 10rpx;
  }

  .options {
    padding: 0 32rpx;
    margin-bottom: 67rpx;
  }

  .options-tiem {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .buy-num {
    flex: 1;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 33px;
  }

  .title {
    font-size: 26rpx;
    font-weight: 600;
    color: #333333;
    line-height: 37rpx;
  }

  .count-set {
    display: flex;
    border-radius: 10rpx;
  }

  .count-set .sub {
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    font-weight: bold;
    text-align: center;
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .count-set .sub:nth-of-type(2) {
    margin: 0 8rpx;
    width: 104rpx;
    text-align: center;
    font-weight: 400;
  }

  .count-set .sub text {
    color: #666;
    font-size: 24rpx;
  }

  .foot-opt {
    padding: 15rpx 0;
    box-shadow: 0px -4px 10px 0px rgba(153, 153, 153, 0.1);
  }

  .add-cart-btn {
    width: 686rpx;
    height: 68rpx;
    text-align: center;
    background: linear-gradient(90deg, #ff7979 0%, #ff5858 100%);
    border-radius: 40rpx;
    color: #fff;
    line-height: 68rpx;
    font-size: 30rpx;
    color: #fff;
    font-weight: bold;
  }

  // 工具盒子

  .concern-cart {
    width: 40%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .concern-cart .item {
    width: 60%;
    text-align: center;
    height: 100rpx;
    padding-top: 15rpx;
    box-sizing: border-box;
    color: #333;
    position: relative;
  }

  .concern-cart .item contact-button {
    vertical-align: middle;
  }

  .concern-cart .item:first-child {
    border-right: 2rpx solid #f5f5f5;
  }

  .concern-cart .iconfont {
    line-height: 1;
  }

  .concern-cart .count {
    position: absolute;
    top: 8rpx;
    right: 40rpx;
    display: inline-block;
    padding: 0 8rpx;
    background: #eee;
    color: #fff;
    border-radius: 16rpx;
    font-size: 20rpx;
  }

  .tool-wrap {
    position: fixed;
    right: 20rpx;
    bottom: 20%;
    z-index: 888;
  }

  .tool-item {
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
    text-align: center;
    border-radius: 50%;
    background: #e64340;
    color: #fff;
  }

  .cart-item {
    position: relative;
  }

  .cart-item-num {
    position: absolute;
    right: -15rpx;
    top: -15rpx;
    line-height: 30rpx;
    padding: 0 10rpx;
    font-size: 10px;
    border-radius: 20rpx;
    background: #eee;
    border: 4rpx solid #fff;
  }

  .tool-wrap .service {
    padding-top: 10rpx;
  }

  /* 分享  */
  .share-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  .share-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #f2f2f2;
  }

  .share-wrap .share-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 42rpx 100rpx;
  }

  .share-wrap .share-list > view {
    text-align: center;
  }

  .share-wrap .share-list button {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: inherit;
    position: absolute;
    line-height: 1.5;
    color: inherit;
    display: inline-block;
    top: 44rpx;
  }

  .share-wrap .share-list button::after {
    border: 0;
  }

  .share-wrap .share-list .item-box {
    width: 92rpx;
    height: 92rpx;
    color: #666;
    font-size: 26rpx;
    border-radius: 50%;
    line-height: 92rpx;
    text-align: center;
    border: 1px solid #ececec;
    background-color: #fff;
    margin: 0 auto;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share-wrap .share-list .item-box .iconfont {
    font-size: 70rpx;
    color: #2990ca;
  }

  .share-wrap .close-btn {
    background-color: #fff;
    text-align: center;
    font-size: 32rpx;
    padding: 20rpx 0;
  }

  .imagePathBox {
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.7);*/
    background: #f9f9f9;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
  }

  .imagePathBox .img-box {
    position: relative;
  }

  .shengcheng {
    width: 90%;
    height: 984rpx;
    position: fixed;
    top: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 1;
    background-color: #fff;
  }

  /* .shengcheng{
  width: 100%;
  height: 1000rpx;
} */

  .baocun {
    display: block;
    width: 38%;
    height: 80rpx;
    padding: 0;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    bottom: 20rpx;
    left: 10%;
    background: #ffe200;
    color: #333;
    font-size: 32rpx;
    border-radius: 44rpx;
    z-index: 999;
  }

  button[class='baocun']::after {
    border: 0;
  }

  .guanbi {
    display: block;
    width: 38%;
    height: 80rpx;
    padding: 0;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    bottom: 20rpx;
    right: 10%;
    background: #f2f2f2;
    color: #333;
    font-size: 32rpx;
    border-radius: 44rpx;
    z-index: 999;
  }

  button[class='guanbi']::after {
    border: 0;
  }

  button.kefu {
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    line-height: 1.52;
    overflow: visible;
    background-color: transparent;
    font-size: 24rpx;
    position: relative;
  }

  button::after {
    border: 0;
  }

  button.kefu image {
    margin-bottom: 2rpx;
  }

  .tool-wrap .kefu {
    position: relative;
  }

  .tool-wrap .kefu .num {
    background-color: #f00;
    color: #fff;
    position: absolute;
    right: -10rpx;
    top: -15rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 50%;
    text-align: center;
    font-size: 20rpx;
  }

  .tool-wrap .kefu image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .tool-wrap .kefu .consult {
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 30rpx;
    text-align: center;
    bottom: -15rpx;
    width: 100%;
    background-color: #fff;
    font-size: 20rpx;
    padding: 5rpx 0;
  }

  .notice-dialog {
    position: fixed;
    top: -180rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-radius: 12rpx;
    /* border-bottom-right-radius: 12rpx; */
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
    left: 50%;
    transform: translateX(-50%);
    width: 89%;
    opacity: 0;
    transition: all ease 0.3s;
  }

  .notice-dialog image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    flex: 0 0 auto;
  }

  .notice-dialog .name {
    color: #000;
    font-size: 32rpx;
  }

  .notice-dialog .msg {
    color: #666;
    font-size: 28rpx;
  }

  .share-tool-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  .share-tool-mask .share-tool-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #f2f2f2;
  }

  .share-tool-mask .share-tool-wrap .share-list > view {
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    padding: 30rpx 0;
  }

  .share-tool-mask .share-tool-wrap .share-list button {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    display: block;
  }

  .share-tool-mask .share-tool-wrap .share-list button::after {
    border: 0;
  }

  .share-tool-mask .share-tool-wrap .close-btn {
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 20rpx 0;
    margin-top: 10rpx;
  }

  /* 收藏选中  */
  .collect-on {
    color: #ff7101;
  }

  .baocun,
  .guanbi {
    bottom: 60rpx;
  }

  .pro-tags {
    padding: 24rpx 32rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    color: #333;
    font-weight: 600;
    display: flex;
  }

  .pro-tags .title {
    flex: 0 0 auto;
    font-size: 26rpx;
    line-height: 200%;
  }

  .pro-tags .cont {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    flex: 1;
  }

  .pro-tags .cont .item {
    display: flex;
    align-items: center;
    font-weight: 400;
    height: 50rpx;
    line-height: 50rpx;
    width: 33.33%;
    font-size: 24rpx;
  }

  .pro-tags .cont .item .iconfont {
    color: #1fda82;
    font-size: 38rpx;
    margin-right: 16rpx;
    overflow: hidden;
    display: inline-block;
  }

  .pro-classify {
    padding: 24rpx 32rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
  }

  .pro-classify .caption {
    color: #333;
    font-size: 26rpx;
    font-weight: 600;
    flex: 0 0 auto;
  }

  .pro-classify .pro-norm {
    flex: 1;
    font-size: 24rpx;
    padding: 0 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pro-classify .pro-norm text {
    color: #000;
  }

  .pro-classify .pro-norm text + text {
    margin-left: 30rpx;
  }

  .pro-classify > text {
    font-size: 28rpx;
  }
</style>
